<template>
  <div>
    <div class="hlsz-flowstage-header-container">
    <div class="hlsz-flowstage-header-parent">
      <div v-if="config.showTitle && config.label" class="hlsz-flowstage-header-parent-title">
        <h2 >{{ config.label }}</h2>
      </div>
      <div class="hlsz-flowstage-header-button">
        <el-button :disabled="disabledBtn" ref="nextBtn" @click="next" v-if="config.showBtnNext">{{config.btnNext}}</el-button>
        <el-button  :disabled="disabledBtn" ref="stopBtn" @click="stop" v-if="config.showBtnStop">{{config.btnStop}}</el-button>
        <el-button :disabled="disabledRestartBtn" ref="restartBtn" @click="restart" v-if="config.showBtnRestart">{{config.btnRestart}}</el-button>
        <el-button ref="logBtn" @click="log" v-if="config.showBtnLog">{{config.btnLog}}</el-button>
      </div>
    </div>
    </div>
    <div class="hlsz-flowstage-parent">
    <div class="hlsz-flowstage">
    <el-steps  v-model="innerValue" :active="innerValue" finish-status="success" v-if="scene===1">
      <el-step v-for="(item, i) in config.children" :status="stepStatus(i)"  v-bind:key="item.name+'_'+i" :ref="'step_'+i" :title="item.title" @click.native="handClick($event,i)"></el-step>
    </el-steps>
    <el-steps  v-model="innerValue" :active="innerValue" finish-status="success" v-else>
      <el-step  v-for="(item, i) in config.children"   v-bind:key="item.name+'_'+i" :ref="'step_'+i" :title="item.title" @click.native="handClick($event,i)"></el-step>
    </el-steps>
    </div>
  </div>
  <Dialog v-if="dialogVisible" ref="dialog" @change="change" @close="onClose" :config="config" :value="value" :actionType="actionType"/>
  <FlowLogDialog v-if="logdialogVisible" ref="FlowLogDialog"  @close="onClose" :config="config"/>
  </div>
</template>
<script>
import Dialog from './dialog'
import FlowLogDialog from './flowLogDialog'
export default {
  components: { Dialog,FlowLogDialog },
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
     config: {
          type: Object,
          default: () => { }
      },
      value: {
        type: Object,
        default: () => { 
          id:'';
          stage:'0';
          state:1 //1未开始;2进行中;3暂停;4终止;5完成
        }
      },
      scene: {
        type: Number,
        default: 1 //1 搭建页面场景；0 编辑场景或 详情场景
      }
   },
   data() {
    return {
      dialogVisible:false,
      logdialogVisible:false,
      actionType:"1",
      innerConfig:this.config!=null?this.config:{},
      innerValue: parseInt(this.value.stage),
      currStep:parseInt(this.value.stage),
    };
  },
  computed: {
    valueJson(){
      return JSON.parse(this.config.defaultValue)
    },
    disabledBtn(){
      //isFinished
      //this.$store.state.generator.curr_view_status==='detail'
      return this.isFinished()||this.$store.state.generator.curr_view_status==='detail'
    },
    disabledRestartBtn(){
      //isFinished
      //this.$store.state.generator.curr_view_status==='detail'
      return this.$store.state.generator.curr_view_status==='detail'
    },
    stepStatus() {
      return function(indx) {
        let s = parseInt(this.value.stage)===indx?'success':'wait'
        // console.log(this.innerValue+':'+indx+':'+s);//根据val进行操作
        return s
      };
    },
  //  config() {
  //     return element.__config__
  //   }
  },
  mounted(){
    
  },
  methods: {
      handClick(e,step){
        debugger
        // if(!this.scene||evt>this.innerValue){
        let val = this.currStep//parseInt(this.config.defaultValue)
        // let len = this.config.children.length
        if(this.scene||step<val+1){
          // this.innerValue = step
          // this.$emit('change', (step)+'')
          let id = this.config.children[step].id
          let val = {
            id,
            stage:step+''
          }
          this.$emit('clickStep', val)
        }
        
      },
      next() {
        debugger
        this.actionType = "1"
        this.logdialogVisible = false
        this.dialogVisible = true
      },
      stop(){
        this.actionType = "2"
        this.dialogVisible = true
        this.logdialogVisible = false
      },
      restart(){
        this.actionType = "3"
        this.dialogVisible = true
        this.logdialogVisible = false
      },
      log(){
        this.actionType = "4"
        this.logdialogVisible = true
        this.dialogVisible = false
      },
      change(val){
        debugger
        this.innerValue = parseInt(val.stage)
        this.currStep = this.innerValue
        this.$emit('change', val)
        this.onClose()
      },
      isFinished(){
        let val = this.currStep
        let len = this.config.children.length
        debugger
        if(val>=len){
          return true
        }
        return false
      },
       onClose(val){
        this.dialogVisible = false
        this.logdialogVisible = false
      },
     
    //   onChange() {
    //     this.$emit('change', (this.innerValue-1)+'')
    //  }
    }
}
</script>
<style lang="scss" scoped>
.hlsz-flowstage-header-container {
  display: flex;
 	justify-content: center;
	align-items: center;
  margin-bottom: 10px;
}
.hlsz-flowstage-header-parent {
  width:95%;
  display: flex;
  align-items: center;
}
.hlsz-flowstage-header-title {
  display: flex;
  margin-right: auto;
}
.hlsz-flowstage-header-button {
  display: flex;
  margin-left: auto;
}
.hlsz-flowstage-parent {
  display: flex;
 	justify-content: center;
	align-items: center;
}
.hlsz-flowstage {
  width:95%;
  margin-bottom: 10px;
}
.theSteps >>> .el-step__line {
  position: absolute;
  border-color: inherit;
  background-color: #f03d37;
  z-index: -50;
}
.theSteps >>> .el-step__head.is-finish {
  color: white;
  border-color: #f03d37;
}
.theSteps >>> .el-step__head.is-wait {
  color: white;
  border-color: #f03d37;
  opacity: 0.5;
}
.theSteps >>> .el-step__head.is-process {
  color: white;
  border-color: #f03d37;
}
.theSteps >>> .el-step__title.is-process {
  font-weight: 400;
  color: #f03d37;
}
.theSteps >>> .el-step__icon.is-text {
  border-radius: 50%;
  border: 2px solid;
  border-color: inherit;
  background-color: #f03d37;
}
.theSteps >>> .el-step__title.is-finish {
  color: #f03d37;
}
.theSteps >>> .el-step.is-horizontal .el-step__line {
  height: 2px;
  top: 11px;
  width: 290px;
}
</style>